<template>
  <view class="medicine-list">
    <view class="list-content" :class="{'isG': isGet}">
      <view class="list-item"
        :class="{'success': (Number(item.inventory) - Number(item.threshold) > 0)&&item.medicineName, 'warning': (Number(item.inventory) - Number(item.threshold) <= 0)&&item.medicineName, 'danger': Number(item.inventory) == 0&&item.medicineName,'grey':!item.medicineName}"
        v-for="item in listData" :key="item.id">
        <view class="item-cell" v-if="item.medicineName">{{ item.medicineName || '-' }}</view>
        <view class="item-cell" v-if="item.medicineName">69码：{{ item.barCode || '-' }}<text v-if="isGet"
            class="copy-text" @click="handleCopy(item.barCode)">复制</text></view>
        <!-- <view class="item-cell" v-if="isGet">追溯码：8465 6574 248<text v-if="isGet" class="copy-text"
            @click="handleCopy(item.code)">复制</text>
          </view> -->
        <view class="item-cell" v-if="item.medicineName">生产厂家：{{ item.manufacturer || '-' }}</view>
        <view class="item-cell" v-if="item.medicineName">药品规格：{{ item.medicineSpecifications || '-' }}</view>
        <view class="item-cell" v-if="item.medicineName">剂型：{{ item.dosageFormName || '-' }}</view>
        <view class="item-num" v-if="item.medicineName"
          :class="{'success': Number(item.inventory) - Number(item.threshold) > 0, 'warning': Number(item.inventory) - Number(item.threshold) <= 0, 'danger': Number(item.inventory) == 0}">
          库存数量: {{ item.inventory||0 }}</view>
        <view class="item-bottom">
          <view class="item-bottom-left" v-if="item.medicineName"
            :class="{'success': Number(item.inventory) - Number(item.threshold) > 0, 'warning': Number(item.inventory) - Number(item.threshold) <= 0, 'danger': Number(item.inventory) == 0}">
            {{ item.slotName || '-' }}
          </view>
          <view class="item-bottom-left greybg" v-else>
            {{ item.slotName || '-' }}
          </view>
          <view class="item-bottom-right" @click.stop="handleReplenish(item)" v-if="item.medicineName&&!isGet>0">补药
          </view>
          <view class="item-bottom-right" @click.stop="handleReplenish(item)"
            v-if="item.medicineName&&!isGet<=0&&item.inventory>0">取药</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { defineProps, defineEmits } from 'vue'

  const props = defineProps({
    // 列表数据
    listData: {
      type: Array,
      default: () => []
    },
    // 是否获取数据
    isGet: {
      type: Boolean,
      default: false
    }
  })

  const emit = defineEmits(['replenish'])

  // 补药按钮点击
  const handleReplenish = (item) => {
    emit('replenish', item)
  }
  // 复制
  const handleCopy = (text) => {
    uni.setClipboardData({
      data: text,
      success: () => {
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        })
      }
    })
  }
</script>

<style lang="scss">
  .medicine-list {

    .list-content {
      padding: 20rpx;
      background-color: #fff;
      padding-bottom: 0;

      .list-item {
        min-height: 340rpx;
        display: flex;
        padding: 22rpx 30rpx;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        flex-direction: column;
        background-size: cover;
        box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.1);
        background-position: center;
        background-repeat: no-repeat;

        &.success {
          background-image: url('/static/index/box_1.png');
        }

        &.warning {
          background-image: url('/static/index/box_2.png');
        }

        &.danger {
          background-image: url('/static/index/box_3.png');
        }

        &.grey {
          background: url('/static/index/empty_bg.png') no-repeat;
          background-position: center;
          width: 92%;
          height: 92%;
        }

        .item-cell {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 10rpx;

          &:nth-child(1) {
            font-size: 28rpx;
            margin-bottom: 14rpx;
            font-weight: 600;
            color: #000;
          }
        }

        .copy-text {
          color: #3B82F6;
          font-size: 24rpx;
          border-left: 1rpx solid #a8a8a8;
          padding-left: 10rpx;
          margin-left: 10rpx;
        }

        .item-num {
          border-bottom: 1rpx solid #f5f5f5;
          padding-bottom: 12rpx;

          &.success {
            color: #07c160;
          }

          &.warning {
            color: #ff9900;
          }

          &.danger {
            color: #ff4d4f;
          }
        }

        .greybg {
          color: #7f8183 !important;
          background-color: #F0F1F4 !important;
          margin-top: 260rpx;
        }

        .item-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #999;
          margin-top: 12rpx;

          .item-bottom-left {
            font-size: 26rpx;
            padding: 8rpx 20rpx;
            font-weight: 500;
            color: #fff;
            border-radius: 50rpx;

            &.success {
              background: #07c160;
            }

            &.warning {
              background: #ff9900;
            }

            &.danger {
              background: #ff4d4f;
            }
          }

          .item-bottom-right {
            font-size: 26rpx;
            padding: 16rpx 64rpx;
            color: #fff;
            background: #3B82F6;
            border-radius: 60rpx;
          }
        }
      }

      .empty-state {
        padding: 100rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #999;
        font-size: 28rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  .isG {
    padding: 0 !important;
    background-color: transparent !important;
  }
</style>